<template>
    <ul class="total">
        <li v-for="(x,k) in data">
            <div :class="['icon',x.class]"></div>
            <div class="count">
                {{x.name}}
                <p>{{num[k] || 0}}</p>
            </div>
        </li>
        <div v-show="more" @click="linkto" class="more"><i class="ri-article-line"></i>更多</div>
    </ul>
</template>

<script>
    export default {
        props:['id','more','data'],
        data(){
            return {
                num:{}
            }
        },
        methods:{
            linkto(){
                let flag=this.$store.state.tree.level==4?'detail':'statistics';
                this.$router.push(`/index/${flag}/${this.id}`)
            }
        },
        watch:{
            id:{
                immediate:true,
                handler(v){
                    if(!v)return ;
                    if(v) this.$axios.map.dataGetData({departId:v}).then(v=>{
                        if(v.code==200) this.num=v.data
                    })
                }
            }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    .total{
        display: flex;
        align-items: center;
        height: 100px;
        li {
            padding: 0 15px;
            display: flex;
            align-items: center;
            border-right: 1px solid #eaeaea;

            .icon {
                height: 65px;
                width: 65px;
                margin: 0 5px 0 0;
                float: left;
            }

            .count {
                float: left;
                font-size: 13px;
                line-height: 18px;
                min-width: 80px;
                p {
                    padding: 5px 0 0;
                    font-size: 25px;
                    line-height: 25px;
                    color: #ff6600;
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            &:hover{
                .count{
                    max-width: unset;
                }
            }
        }
        .more {
            position: absolute;
            cursor: pointer;
            left: 100%;
            top: 20px;
            height: 85px;
            color: #fff;
            background: linear-gradient(to bottom, #0dc0f7, #0576da 79%, #0997e7 88%, #0cbaf5);
            border: 1px solid #0776d8;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
            width: 60px;
            text-align: center;
            font-size: 13px;
            z-index: 2;
            border-radius: 0 3px 3px 0;
            display: block;

            i {
                margin: 15px auto 5px;
                display: block;
                font-size: 30px;
            }
        }
    }
</style>
